<template>
	<div class="container">
		<SearchForm @reset="reset" @search="search" ref="search">
			<FromItem
				v-for="item in searchs"
				:config="item"
				v-model="queryParams"></FromItem>
		</SearchForm>

		<div class="card-wrap card-padding">
			<div class="table-title-wrap justify-end"></div>
			<div class="tableBox">
				<table-page
					:loading="loading"
					:dataList="dataList"
					:total="total"
					:page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize"
					:border="true"
					@setSizeCurrent="getList">
					<!-- 操作插槽 -->
					<template slot="tableColAc">
						<el-table-column
							label="操作"
							align="center"
							width="160">
							<template slot-scope="scope">
								<div class="handle">
									<!-- <el-button -->
									<!-- size="mini" -->
									<!-- type="text" -->
									<!-- @click=" -->
									<!-- toPage({ -->
									<!-- name: 'ContractChange', -->
									<!-- query: { -->
									<!-- orderId: scope.row.orderId, -->
									<!-- }, -->
									<!-- }) -->
									<!-- " -->
									<!-- v-hasPermi="[ -->
									<!-- 'order:mainOrder:list:sign', -->
									<!-- ]"> -->
									<!-- 电子签 -->
									<!-- </el-button> -->
									<el-button
										size="mini"
										type="text"
										@click="
											toPage({
												name: 'ContractChangePreview',
												query: {
													orderChangeId:
														scope.row.orderChangeId,
													orderId: scope.row.orderId,
													from: 'OrderChangeHistoryList',
												},
											})
										"
										v-hasPermi="[
											'order:mainOrder:list:preview',
										]">
										详情
									</el-button>

									<el-button
										size="mini"
										type="text"
										v-if="scope.row.flowStatus == 4"
										@click="
											toPage({
												name: 'ContractChange',
												query: {
													orderChangeId:
														scope.row.orderChangeId,
													from: 'relaunch',
												},
											})
										"
										v-hasPermi="[
											'order:mainOrder:list:relaunch',
										]">
										重新发起
									</el-button>
									<el-button
										v-if="
											scope.row.returncarFlowStatus == 5
										"
										size="mini"
										type="text"
										@click="
											clickHandler('returnCar', scope.row)
										"
										v-hasPermi="[
											'order:mainOrder:list:returnCar',
										]">
										还车
									</el-button>
									<el-button
										v-if="
											scope.row.deliverycarFlowStatus == 5
										"
										size="mini"
										type="text"
										@click="
											clickHandler(
												'outStorage',
												scope.row,
											)
										"
										v-hasPermi="[
											'order:mainOrder:list:outStorage',
										]">
										出库
									</el-button>
								</div>
							</template>
						</el-table-column>
						<TableCloumn
							v-for="(item, index) in tableCloumns"
							:config="item"></TableCloumn>
					</template>
				</table-page>
			</div>
		</div>
	</div>
</template>

<script>
	import FromItem from '@/components/A/A-form/formItem/index.vue';
	import TableCloumn from '@/components/A/A-form/tableColumn/index.vue';
	import * as app from '@/api/app.js';
	import * as apis from '@/api/order/mainOrder/contractChange/api.js';
	export default {
		name: 'OrderChangeHistoryList',
		components: { TableCloumn, FromItem },
		dicts: ['order_change_type'],
		data() {
			return {
				total: 0,
				loading: false,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				dataList: [],
				deptList: {
					company: [],
					changeType: [
						{
							label: '出租方',
							value: '1',
						},
						{
							label: '承租方',
							value: '2',
						},
						{
							label: '租赁期限',
							value: '3',
						},
					],
					flowStatus: [
						{
							label: '审核中',
							value: '2',
						},
						{
							label: '审核通过',
							value: '3',
						},
						{
							label: '审核失败',
							value: '4',
						},
					],
				},
			};
		},

		computed: {
			searchs() {
				return [
					{ label: '订单编号:', type: 'input', prop: 'orderCode' },
					// {
					// 	label: '出租方:',
					// 	type: 'select',
					// 	prop: 'newLessorId',
					// 	dict: {
					// 		list: this.deptList.company,
					// 		label: 'deptName',
					// 		value: 'deptId',
					// 	},
					// },
					{
						label: '承租方:',
						type: 'select_dialog',
						prop: 'newLeaseeId',
						propLabel: 'newLeaseeName',
						selectDialogOptions: {
							type: 'userNo',
							success: ({ data, row }) => {
								row.newLeaseeId = data.customerId;
								row.newLeaseeName = data.customerName;
							},
						},
					},
					{
						label: '变更类型:',
						type: 'select',
						prop: 'changeType',
						dict: {
							list: this.dict.type.order_change_type,
						},
					},
					{
						label: '变更状态:',
						type: 'select',
						prop: 'flowStatus',
						dict: {
							list: this.deptList.flowStatus,
						},
					},
				];
			},
			tableCloumns() {
				return [
					{
						label: '订单编号',
						prop: 'orderCode',
					},

					{
						label: '变更类型',
						prop: 'changeTypeStr',
					},
					// {
					// 	label: '出租方',
					// 	prop: 'newLessorName',
					// },
					{
						label: '承租方',
						prop: 'newLeaseeName',
						format: ({ val, row }) => {
							return row.newLeaseeName || row.leaseeName || '-';
						},
					},

					{
						label: '变更状态',
						prop: 'flowStatusStr',
					},
					{
						label: '申请时间',
						prop: 'applyTime',
					},
					{
						label: '变更时间',
						prop: 'changeTime',
					},
					{
						label: '变更人',
						prop: 'applyUsrName',
					},
				];
			},
		},
		activated() {
			this.getList();
		},
		created() {
			this.getList();
			this.getDeptList(2);
		},
		methods: {
			clickHandler(type, row) {
				let method = null,
					label = '';
				switch (type) {
					case 'returnCar':
						method = apis.OrderChangeReturnCar;
						label = '此操作将操作还车，是否继续？';
						break;
					case 'outStorage':
						method = apis.OrderChangeOutStorage;
						label = '此操作将操作出库，是否继续？';
						break;
				}
				this.$alert(label, '提示', {
					confirmButtonText: '确定',
					callback: action => {
						if (action == 'confirm') {
							method(row.orderCarChangeId).then(res => {
								if (res.code == 200) {
									this.$message({
										message: '操作成功',
										type: 'success',
									});
									this.getList();
								}
							});
						}
					},
				});
			},

			getDeptList(deptType) {
				let params = {
					deptType,
				};
				app.DeptListNoPermission(params).then(res => {
					if (res.code == 200) {
						res?.data?.map(item => {
							item.deptId = item.deptId?.toString();
						});
						switch (deptType) {
							case 1:
								this.deptList.department = res?.data ?? [];
								break;
							case 2:
								this.deptList.company = res?.data ?? [];
								break;
						}
					}
				});
			},
			toPage(route) {
				this._toPage(route);
			},
			search() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			reset() {
				this.$refs.search.form_resetFields();
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
				};
				this.getList();
			},
			getList() {
				this.loading = true;
				apis.OrderChangeHistoryList(this.queryParams)
					.then(res => {
						if (res.code == 200) {
							this.dataList = res.rows;
							this.total = res.total;
						}
					})
					.catch(err => {
						console.log(err);
					})
					.finally(() => {
						this.loading = false;
					});
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		box-sizing: border-box;
		margin: 15px;
	}

	.tableBox {
		margin-top: 10px;
		background-color: #fff;
	}
	.searchbtns {
		padding: 20px 15px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}
	.search_condition {
		margin-top: 15px;
		padding: 15px 20px 0;
		background-color: #fff;
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		.item {
			font-size: 14px;
			padding: 10px 15px;
			border: 1px solid #ccc;
			border-radius: 7px;
			cursor: pointer;
			background-color: #fff;
			min-width: 74px;
			text-align: center;
		}
		.active {
			border-color: #339dff;
			color: #339dff;
		}
	}
	.search_handle {
		margin-top: 15px;
	}
	.handle {
		display: flex;
		justify-content: space-around;
	}
	.dialog_title {
		.main {
			font-weight: 500;
			font-size: 16px;
			color: #333;
			padding-bottom: 5px;
		}
		.tip {
			color: #eb7785;
			font-size: 12px;
		}
	}
	.tips {
		margin: 15px;
		font-size: 12px;
		color: red;
		.tips_title {
			font-size: 14px;
		}
	}
	// ::v-deep div:empty::after {
	//     content: "-";
	// }

	.dialogContent {
		margin: 15px 20px;
	}
	::v-deep .el-input-number {
		width: 220px;
		input {
			width: 100%;
			text-align: left;
			padding: 0 15px !important;
		}
		.el-input-number__decrease {
			display: none;
		}
		.el-input-number__increase {
			display: none;
		}
	}
	.sign_normal {
		color: #1d4ed8;
	}
</style>
